<template>
	<view class="app" style="height:var(--status-bar-height);">
		<!-- 上半部分 -->
		<view class="top">
			<!-- 标题行 -->
			<view class="title_line">
				<view class="title_line_left">
					<text class="text">禾积分（LHT）</text>
					<!-- <view class="button">已实名</view> -->
					<view class="button" @click="test()">{{ realname[userDetail&&userDetail.realname_type||0] }}</view>
				</view>
				<image v-if="showPoint" class="icon-setting" :src="'/static/images/visible.png'" @click="checkPoint"></image>
				<image v-else class="icon-setting" :src="'/static/images/nosee.png'" @click="checkPoint"></image>
			</view>
			<!-- 值行 -->
			<view class="value_line">
				<view>
					<text class="value_line_l">{{ showPoint?point+'':'******' }}</text><text class="value_line_r">LHT</text><text class="value_line_r">= 0.000000￥</text>
				</view>
			</view>
			
			<!-- 图标行 -->
			<view class="icon_line">
				<view class="icon_line_item" @click="toRecharge('/pages/purse/recharge/recharge')">
					<!-- <view class="icon_line_item_icon"></view> -->
					<image src="/static/images/pures_cz.png" class="icon_line_item_icon"></image>
					<text class="icon_line_item_text">转入</text>
				</view>
				<view class="icon_line_item" @click="mynavTo('/pages/purse/cash/cash')">
					<!-- <view class="icon_line_item_icon"></view> -->
					<image src="/static/images/pures_tb.png" class="icon_line_item_icon"></image>
					<text class="icon_line_item_text">转出</text>
				</view>

				<!-- <view class="icon_line_item" @click="navTo('/pages/purse/flow/list')"> -->
				<view class="icon_line_item" @click="mynavTo('/pages/purse/capitalFlow/capitalFlow')">
					<image src="/static/images/pures_ls.png" class="icon_line_item_icon"></image>
					<text class="icon_line_item_text">流水</text>
				</view>
				<view class="icon_line_item" @click="mynavTo('/pages/purse/convert/convert')">
					<!-- <view class="icon_line_item_icon"></view> -->
					<image src="/static/images/pures_dh.png" class="icon_line_item_icon"></image>
					<text class="icon_line_item_text">兑换</text>
				</view>
			</view>

		</view>
		<!-- 下半部分 -->
		<view class="bottom">
			<view class="bottom_zx">
				<text class="text zx_title">积分价格走势</text>
				<view class="zx">
					<!-- 折线Line纯数字-->
					<canvas canvas-id="canvasColumn" id="canvasColumn" class="charts" />
				</view>

			</view>

		</view>

		<!-- <user-authentic-modal ref="authenticModal"></user-authentic-modal> -->
	</view>
</template>

<script>
	import uCharts from '@/components/u-charts/u-charts.js';
	import userAuthenticModal from '../../tabbar/components/user-authentication.vue';

	let that;
	let canvaColumn = null;
	export default {
		name: 'Index',
		components: {
			userAuthenticModal
		},
		data() {
			return {
				//数字的图--折线图数据
				lineData: {
					categories: ['01.01', '01.02', '01.03', '01.04', '01.05', '01.06', '01.07'],
					series: [{
						name: '积分价格走势',
						data: [0, 0, 0, 0, 0, 0, 0]
					}]
				},
				// 积分数
				point: '0.000000',
				// 当前积分价格
				pointValue: null,
				// 昨日价格
				lastDay: null,
				// 较昨日涨幅
				range: 0.0,
				// 当前估值
				totalValue: 0,
				// 用户详情
				userDetail: null,
				// 是否显示积分
				showPoint: true,
				// 是否实名type
				realname: ["未实名", "审核中", "已实名"]
			};
		},
		methods: {
			// 跳转到转入
			toRecharge(url) {
				// uni.navigateTo({
				// 	url: url + "?address=" + that.userDetail.wallet_address
				// });
				uni.navigateTo({
					url: url
				});
			},
			// 切换显示积分
			checkPoint() {
				that.showPoint = !that.showPoint;
			},
			// 需要实名判断跳转
			mynavTo(url) {
				// let type = that.userDetail.realname_type || 0;
				// if (type == 1) {
				// 	// 审核中
				// 	uni.showModal({
				// 		title: '提示',
				// 		content: '您的实名信息正在审核，请耐心等待',
				// 		showCancel: false,
				// 		confirmColor: "#55BB8A",
				// 	});
				// } else if (type == 2) {
					// 已经实名
					uni.navigateTo({
						url: url
					});					
				// } else {
				// 	// 未实名
				// 	that.$refs.authenticModal.open();
				// }
			},
			// 显示折线图
			showColumn(categories, series) {
				canvaColumn = new uCharts({
					$this: that,
					canvasId: "canvasColumn",
					type: 'line',
					width: 355,
					height: 200,
					legend: {
						show: false
					},
					fontSize: 11,
					background: '#FFFFFF',
					pixelRatio: 1,
					animation: true,
					colors: ["#58ba8d"],
					padding: [5, 0, 0, 10],
					enableMarkLine: false,
					categories: categories || that.lineData.categories,
					series: series || that.lineData.series,
					xAxis: {
						disableGrid: true,
					},
					yAxis: {
						splitNumber: 3,
						disableGrid: true,
					},

					dataLabel: true,
					// extra: {
					// 	column: {
					// 	  width: 500
					// 	}
					//   }
				});
			},
			// 检查钱包是否开通
			async checkWallet() {
				await this.$request('wallet', 'check', {}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
				}).catch(err => {
					this.$util.msg('调用失败');
					this.loading = false;
					console.log(err);
				})
			},
			// 创建钱包
			async createWallet() {
				await this.$request('wallet', 'create', {}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
				}).catch(err => {
					this.$util.msg('调用失败');
					this.loading = false;
					console.log(err);
				})
			},
			// 查询LHT地址列表
			async queryAddress() {
				await this.$request('lhtAddress', 'list', {

				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg('调用失败');
					this.loading = false;
					console.log(err);
				})
			},
			// 新增LHT地址
			async addAddress() {
				await this.$request('lhtAddress', 'add', {
					name: "测试",
					address: "123456789abcdefg"
				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg('调用失败');
					this.loading = false;
					console.log(err);
				})
			},
			// 删除LHT地址
			async removeAddress() {
				await this.$request('lhtAddress', 'remove', {
					addressId: "c54bd3a25f715550008133d008feee95"
				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg('调用失败');
					this.loading = false;
					console.log(err);
				})
			},
			// 查询当前币的价格
			async queryPointValue() {
				await this.$request('point', 'value', {}).then(res => {
					// this.$util.msg(response.msg);
					if (res) {
						this.pointValue = Number(res.data || 0).toFixed(6);
						console.log("当前价格", this.pointValue);
						this.totalValue = (this.point * this.pointValue).toFixed(6); //计算当前估值
						if (this.lastDay) {
							let rangeValue = ((this.pointValue - this.lastDay) / this.lastDay).toFixed(6); //计算涨幅

							console.log("rangeValue1", rangeValue);
							this.range = rangeValue > 0 ? "+" + rangeValue : rangeValue;
						}
					}

				}).catch(err => {
					console.error(err);
				})
			},
			// 查询最近七天的币价格
			async queryPointValueHis() {
				await this.$request('point', 'history', {}).then(res => {
					console.log(res);
					if (res) {
						let data = res.data;
						console.log("七天价格：", data);
						if (data.length > 0) {
							this.lastDay = data[0].integralNumber || 1; //获取昨日的价格
							if (this.pointValue) {
								let rangeValue = ((this.pointValue - this.lastDay) / this.lastDay).toFixed(6); //计算涨幅
								console.log("rangeValue2", rangeValue);
								this.range = rangeValue > 0 ? "+" + rangeValue : rangeValue;
							}
						}
						// 对数组倒序
						let day7 = data.reverse();
						this.formatterDate(day7);

					}

				}).catch(err => {
					this.$util.msg(err || "查询失败");
					this.loading = false;
					console.log(err);
				})
			},
			// 查询用户积分数
			async queryPointCount() {
				await this.$request('point', 'count', {}).then(res => {
					if (res) {
						this.point = Number(res.data || 0).toFixed(8);
						this.totalValue = (this.point * this.pointValue).toFixed(6); //计算当前估值
					}
				}).catch(err => {
					console.error("查询用户积分失败", err);
				})
			},
			// 格式化时间方法
			async formatterDate(arr) {
				let dateArr = []; //日期
				let valueArr = []; //值
				arr.forEach(data => {
					dateArr.push(that.$util.date("m.d", data.createTime));
					valueArr.push(data.integralNumber || 1);
				});
				console.log(dateArr, valueArr);

				let series = [{
					name: '积分价格走势',
					data: valueArr,
					format: val => {
						return val.toFixed(6);
					}
				}];
				// 更新图数据
				that.showColumn(dateArr, series);
				// canvaColumn.updateData({series: series,categories: dateArr});
			},
			/**
			 * 增加积分（自己）
			 */
			async addPoint() {
				await this.$request('wallet', 'add', {
					point: 100,
					remark: "奖励积分"
				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg(err || "增加积分失败");
					this.loading = false;
					console.log(err);
				})
			},

			/**
			 * 转出（自己给指定的地址转账）
			 */
			async transferPoint() {
				await this.$request('wallet', 'transfer', {
					point: 5,
					toAddress: "a567d67222dd4aafdc0e95368441167326125d7e28f0f37a60268e4fef65c712",
					remark: "转入123",
				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg(err || "转出失败");
					this.loading = false;
					console.log(err);
				})
			},

			/**
			 * 兑换 (将自己的积分兑换成余额)
			 */
			async convertPoint() {
				await this.$request('wallet', 'convert', {
					point: 10,
					money: 10,
					remark: "兑换备注123"
				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg(err || "兑换失败");
					this.loading = false;
					console.log(err);
				})
			},
			/**
			 * 查询流水记录 type 0:转入记录，1：转出记录 2：兑换记录 3:增加积分记录
			 */
			async flowPoint() {
				await this.$request('wallet', 'flow', {
					type: 2
				}).then(response => {
					this.$util.msg(response.msg);
					this.loading = false;
					console.log(response);

				}).catch(err => {
					this.$util.msg(err || "查询失败");
					this.loading = false;
					console.log(err);
				})
			},

			/**
			 * 查询用户基本信息
			 */
			async queryUser() {
				await this.$request('user', 'get', {}).then(res => {
					console.log("查询用户信息", res);
					that.userDetail = res.data;
				}).catch(err => {
					console.error(err);
				})
			},
		},
		// 监听页面加载
		onLoad(event) {
			that = this;
			// 查询历史7天价格走势
			this.queryPointValueHis();

		},
		// 监听页面显示
		onShow() {
			that.$refs.authenticModal && that.$refs.authenticModal.close();
			uni.showLoading({
				title: '加载中'
			});

			// 查询用户信息
			this.queryUser();
			// 查询当前币价格
			this.queryPointValue();
			// 查询用户积分数
			this.queryPointCount();

			setTimeout(function() {
				uni.hideLoading();
			}, 1500);


		},
		// 监听页面隐藏
		onHide() {

		},
		// 监听页面卸载
		onUnload() {

		},
		// 监听页面下拉刷新
		onPullDownRefresh() {

		},
		// 组件：在实例创建完成后被立即调用
		created() {

		},
		// 导航栏按钮点击
		onNavigationBarButtonTap() {
			uni.navigateTo({
				url: "../myAddress/myAddress?address=" + that.userDetail.wallet_address
			});
		}
	};
</script>

<style lang="scss">
	.app {
		display: flex;
		flex-direction: column;
	}

	/* 上半部分 */
	.top {
		width: 100%;
		height: 404rpx;
		background-color: #55BB8A;
		padding: 0 30rpx;
		display: flex;
		flex-direction: column;

		/* 标题行 */
		.title_line {
			width: 100%;
			height: 88rpx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;

			/* 标题左 */
			.title_line_left {
				display: flex;
				flex-direction: row;
				align-items: baseline;
				width: 50%;
			}
		}

		/* 值行 */
		.value_line {
			width: 100%;
			height: 104rpx;
			border-bottom: 1px solid rgba(0, 28, 15, 0.17);
			display: flex;
			flex-direction: row;
			align-items: center;

			.value_line_l {
				font-size: 60rpx;
				font-weight: bold;
				line-height: 44rpx;
				color: #001C0F;
				align-items: baseline;
			}

			.value_line_r {
				margin-left: 20rpx;
				align-items: baseline;
			}
		}

		/* 图标行 */
		.icon_line {
			display: flex;
			flex-direction: row;
			align-items: center;
			flex-grow: 1;

			.icon_line_item {
				width: 25%;
				height: 100%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				.icon_line_item_icon {
					width: 100rpx;
					height: 100rpx;
					background-color: #001C0F;
					border-radius: 20rpx;
				}

				.icon_line_item_text {
					font-size: 30rpx;
					margin-top: 16rpx;
				}

			}
		}
	}

	/* 图标 */
	.icon-setting {
		display: inline-block;
		width: 36rpx;
		height: 36rpx;
		margin-left: 34rpx;
	}

	/* 文字 */
	.text {
		color: #001C0F;
		font-size: 26rpx;
	}

	/* 文字灰色 */
	.text2 {
		color: #8F8F8F;
		font-size: 26rpx;
	}

	/* ￥ */
	.text3 {
		font-size: 26rpx;
		font-weight: bold;
	}

	/* 当前价格 */
	.text4 {
		font-size: 36rpx;
		font-weight: bold;
	}

	/* 涨幅 */
	.text5 {
		font-size: 36rpx;
		color: #DE4444;
	}

	/* 100 */
	.text6 {
		font-size: 26rpx;
	}

	/* 实名按钮 */
	.button {
		width: 96rpx;
		height: 36rpx;
		background-color: #449B72;
		border-radius: 26rpx;
		font-size: 20rpx;
		letter-spacing: 1rpx;
		color: #FFFFFF;
		align-items: center;
		text-align: center;
	}

	/* 下半部分 */
	.bottom {
		flex-grow: 1;
		display: flex;
		flex-direction: column;

		.bottom_top {
			padding: 0 30rpx;
		}

		.bottom_item {
			width: 100%;
			height: 160rpx;
			padding-top: 30rpx;
			border-bottom: 1px solid rgba(0, 28, 15, 0.17);
			display: flex;
			flex-direction: column;

			.bottom_item_title {
				display: flex;
				flex-direction: row;
				justify-content: space-between;
			}

			.bottom_item_value {
				flex-grow: 1;
				height: 110rpx;
				align-items: center;
				display: flex;
				flex-direction: row;
				justify-content: space-between;

			}
		}

		.bottom_zx {
			flex-grow: 1;
			display: flex;
			flex-direction: column;

			.zx_title {
				padding: 30rpx;
			}

			.zx {
				flex-grow: 1;
				width: 100%;
				// background-color: #C9E9DA;
			}
		}
	}

	.charts {
		width: 700rpx;
		height: 400rpx;
	}
</style>
